<template>
  <div class="depInfo">
    <div class="header">
      <div class="avatar">
        <a-avatar :src="avatarUrl" :size="100" />
      </div>
      <div class="empInfo">
        <div>
          {{ name
          }}<span
            style="display: inline-block;line-height:22px;width:60px;height:22px;text-align:center;background:rgb(255,223,223);border-radius:11px;border:1px solid rgba(255,0,0,0.42);color:rgb(255,124,124);font-size: 14px;margin-left: 10px"
          >
            {{ getEmployeeStatus(status, formalType) }}
          </span>
        </div>
        <div
          style="display: inline-block;width: 166px;height: 30px;line-height:30px;text-align: center;background:rgba(252,175,79,0.12);border-radius:15px;font-size: 14px;font-weight: 500"
        >
          手机号 <span style="color: rgba(106, 101, 246,1)">{{ phone }}</span>
        </div>
        <div
          v-if="joinDate"
          style="margin-left:10px;display: inline-block;width: 166px;height: 30px;line-height:30px;text-align: center;background:rgba(252,175,79,0.12);border-radius:15px;font-size: 14px;font-weight: 500"
        >
          入职时间
          <span style="color: rgba(106, 101, 246,1)">{{ joinDate | formatDate }}</span>
        </div>
      </div>
    </div>
    <div class="container">
      <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-form-item :colon="false" label="离职类型">
          <a-select
            v-decorator="[
              'quitType',
              {
                rules: [{ required: true, message: '请输入' }],
                initialValue: 1
              }
            ]"
            :options="quitTypeOptions"
          />
        </a-form-item>

        <a-form-item :colon="false" label="离职时间">
          <a-date-picker v-decorator="['quitDate', { rules: [{ required: true, message: '请输入' }] }]" type="date" />
        </a-form-item>

        <a-form-item :colon="false" label="办理离职时间">
          <a-date-picker v-decorator="['handleQuitDate']" type="date" />
        </a-form-item>

        <a-form-item :colon="false" label="个人主因">
          <a-select v-decorator="['personalReason']" :options="personReasonOptions" />
        </a-form-item>

        <a-form-item :colon="false" label="公司主因">
          <a-select v-decorator="['companyReason']" :options="companyReasonOptions" />
        </a-form-item>

        <a-form-item :colon="false" style="width: 90%;" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="离职原因">
          <a-input v-decorator="['quitReason']" type="textarea" />
        </a-form-item>

        <a-form-item :colon="false" style="width: 90%;" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="申请离职原因">
          <a-input v-decorator="['applyQuitReason']" type="textarea" />
        </a-form-item>

        <a-form-item :colon="false" label="补偿金">
          <a-input v-decorator="['compensation']">
            <div slot="suffix">元</div>
          </a-input>
        </a-form-item>

        <a-form-item :colon="false" label="待通知金">
          <a-input v-decorator="['paymentLieuNotice']">
            <div slot="suffix">元</div>
          </a-input>
        </a-form-item>

        <a-form-item :colon="false" label="社保减员月">
          <a-date-picker v-decorator="['ssAttritionMonth', { rules: [{ required: true, message: '请输入' }] }]" type="month" />
        </a-form-item>

        <a-form-item :colon="false" label="公积金减员月">
          <a-date-picker v-decorator="['pfAttritionMonth', { rules: [{ required: true, message: '请输入' }] }]" type="month" />
        </a-form-item>

        <a-form-item :colon="false" label="剩余年假">
          <a-input v-decorator="['surplusYearHoliday']">
            <div slot="suffix">天</div>
          </a-input>
        </a-form-item>

        <a-form-item :colon="false" label="剩余调休">
          <a-input v-decorator="['surplusBreakOff']">
            <div slot="suffix">天</div>
          </a-input>
        </a-form-item>

        <a-form-item :colon="false" label="直属下属数量">
          <a-input v-decorator="['directlyUnderNumber']" />
        </a-form-item>
        <div class="button-area">
          <a-button type="button" class="mr20" @click="cancel">取消</a-button>
          <a-button class="submit-btn" type="primary" @click="submitLeaveInfo">
            提交
          </a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script>
import { getEmpChanges, leavePosition } from "@/api/staff/empChanges";
import { findEmpInfoTitle } from "@/api/staff/staff";

export default {
  name: "Detail",
  filters: {
    formatDate
  },
  data() {
    return {
      form: this.$form.createForm(this),
      companyId: "",
      name: "",
      status: "",
      formalType: "",
      phone: "",
      joinDate: "",
      employInfoId: this.$route.query.empInfoId,
      employInfo: "",
      empIdCardVo: {},
      avatarUrl: "",
      empChanges: {},

      quitTypeOptions: [
        { label: "主动离职", value: 1 },
        { label: "被动离职", value: 2 },
        { label: "其它", value: 3 }
      ],
      personReasonOptions: [
        { label: "请选择", value: "" },
        { label: "个人身体健康因素", value: 1 },
        { label: "家庭原因", value: 2 },
        { label: "交通不便，离住处远", value: 3 },
        { label: "回校深造", value: 4 },
        { label: "找到更好的企业工作", value: 5 },
        { label: "实习生返校", value: 6 },
        { label: "自己经营生意", value: 7 },
        { label: "转换行业", value: 8 },
        { label: "其它", value: 9 }
      ],
      companyReasonOptions: [
        { label: "请选择", value: "" },
        { label: "工作量太大，压力大", value: 1 },
        { label: "工资低", value: 2 },
        { label: "福利", value: 3 },
        { label: "与领导关系不和谐", value: 4 },
        { label: "无晋升机会", value: 5 },
        { label: "不满意公司策略和措施", value: 6 },
        { label: "同事关系不融洽", value: 7 },
        { label: "获取工作必须的资料信息或支持困难", value: 8 },
        { label: "工作时间", value: 9 },
        { label: "工作意见不受重视", value: 10 },
        { label: "工作目标/要求不明确", value: 11 },
        { label: "其它", value: 12 }
      ],
      rules: {
        quitDate: { required: true, message: "不可为空" },
        quitType: { required: true, message: "不可为空" },
        ssAttritionMonth: { required: true, message: "不可为空" },
        pfAttritionMonth: { required: true, message: "不可为空" }
      }
    };
  },
  created() {
    this.companyId = this.$store.state.hr.companyId;
  },
  mounted() {
    this.initData();
  },
  methods: {
    alertResultMessage(result) {
      let type = "success";
      if (result.code !== 0) {
        type = "error";
      }

      this.$notification[type]({
        message: result.msg
      });
    },
    cancel: function() {
      this.$router.go(-1);
    },
    submitLeaveInfo: function(e) {
      e.preventDefault();
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.$confirm({
            title: "离职",
            content: "确定离职该员工此操作不可逆, 是否继续?",
            onOk() {
              values.empIds = [that.employInfoId];
              values.companyId = that.companyId;
              leavePosition(values).then(res => {
                that.alertResultMessage(res);
                if (res.code === 200) {
                  that.cancel();
                }
              });
            },
            onCancel() {}
          });
        }
      });
    },
    getEmployeeStatus(status, formalType) {
      if (status === 1) {
        return "待入职";
      } else if (status === 2) {
        if (formalType === 1) {
          return "适用期";
        }
      } else if (status === 4) {
        return "离职";
      }
      // return "在职"
    },
    initData() {
      findEmpInfoTitle({
        id: this.employInfoId,
        companyId: this.companyId
      }).then(res => {
        const data = res.data;
        this.name = data.name;
        this.joinDate = data.joinDate;
        this.phone = data.phone;
        this.avatarUrl = data.empPhoto;
        this.formalType = data.formalType;
        this.status = data.status;
      });
    }
  }
};
function formatDate(value) {
  if (isNaN(value) || value === "") {
    return "";
  }
  const date = new Date(value);
  const Y = date.getFullYear();
  let m = date.getMonth() + 1;
  let d = date.getDate();
  let H = date.getHours();
  let i = date.getMinutes();
  let s = date.getSeconds();
  if (m < 10) {
    m = "0" + m;
  }
  if (d < 10) {
    d = "0" + d;
  }
  if (H < 10) {
    H = "0" + H;
  }
  if (i < 10) {
    i = "0" + i;
  }
  if (s < 10) {
    s = "0" + s;
  }
  const t = Y + "-" + m + "-" + d;
  return t;
}
</script>

<style lang="scss" scoped>
.depInfo {
  padding: 10px 15% 0 15%;
}

.depInfo > div {
  border-radius: 12px;
}

.header {
  width: 100%;
  background: white;
  padding: 40px 0;
}

.avatar {
  margin-left: 50px;
  display: inline-block;
  position: relative;

  .ant-avatar {
    width: 100px;
    height: 100px;
    border: 1px solid rgba(232, 232, 232, 1);

    > img {
      width: 100%;
      height: 100%;
    }
  }
}

.empInfo {
  display: inline-block;
  line-height: 50px;
  vertical-align: top;
  margin-left: 40px;
}

.header-button-group {
  width: 100%;
  text-align: right;
  padding-right: 32px;
  margin-bottom: 10px;
}

.container {
  width: 100%;
  background: white;
  border-radius: 12px;
  padding-top: 40px;
  margin-bottom: 58px;
  margin-top: 25px;
}

.ant-row.ant-form-item {
  width: 45%;
  display: inline-block;
}

.ant-calendar-picker {
  width: 100%;
}

>>> input.ant-input {
  height: 36px;
}

.ant-btn {
  width: 100px;
}

.button-area {
  width: 100%;
  height: 58px;
  line-height: 58px;
  border-top: 1px solid #e5e5e5;
  margin-top: 40px;
  text-align: right;
  padding-right: 40px;
}

.button-area .ant-btn {
  width: 106px;
}
.submit-btn {
  color: white;
}
.submit-btn:hover {
  color: white;
  border: none;
}
.submit-btn:focus {
  outline: none;
  border: none;
}
</style>
